<template>
	<view class="popup" v-if="isShow">
		<view class="popup-box">
			<view class="popup-title">
				设备连网
			</view>
			<view class="popup-form">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-box">
						<text>{{array[index] || '请选择wifi'}}</text>
						<image src="/static/images/icon.png" mode="widthFix"></image>
					</view>
				</picker>
				<input class="uni-input" type="password" v-model="value" placeholder="请输入密码">
				<button @click="submitWifi">开始连网</button>
				<text @click="closeBtn" class="close">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wifiSet",
		data() {
			return {
				isShow:false,
				array: [],
				index: 0,
				value:'',
				wifiName:''
			};
		},
		mounted() {
			
		},
		methods:{
			openModel(){
				this.isShow = true
				this.getWifis()
			},
			//获取wifi
			getWifis(){
				uni.startWifi({
					success:(res)=>{
						// 获取已连接的wifi信息
						uni.getConnectedWifi({
							partialInfo:true,
							success:(res) => {
								console.log(res)
								this.array = [res.wifi.SSID]
								this.wifiName = this.array[0]
							},
							fail(err) {
								if (err.errCode === 12010) {
									console.log("请检查定位权限或系统设置");
								}
							}
						})
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.wifiName = this.array[e.detail.value]
			},
			submitWifi(){
				const info = this.wifiName+','+this.value
				// console.log(info)
				this.$emit('getwifiInfo',info)
				this.isShow = false
			},
			closeBtn(){
				this.isShow = false
			}
		}
	}
</script>

<style lang="less">
	.popup{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;
		.popup-box{
			width: 80%;
			border-radius: 32upx;
			background: linear-gradient(180deg, #CDDAF8 0%, #FFFFFF 23%);
			padding: 20upx 40upx;
			box-sizing: border-box;
			.popup-title{
				width: 100%;
				line-height: 72upx;
				text-align: center;
				background: url('/static/images/img2.png') 32% 0 no-repeat;
				background-size: 120upx 72upx;
				padding-top: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #1A1A1A;
			}
			.uni-input{
				width: 100%;
				height: 80upx;
				background-color: #F5F7F9;
				margin-bottom: 20upx;
				padding: 0 20upx;
				box-sizing: border-box;
				border-radius: 12upx;
				font-size: 28upx;
			}
			.uni-box{
				width: 100%;
				height: 80upx;
				background-color: #F5F7F9;
				margin-bottom: 20upx;
				padding: 0 20upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				border-radius: 12upx;
				image {
					width: 40upx;
					height: auto;
				}
			}
			button{
				border-radius: 120upx;
				background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
				color: #fff;
				margin-top: 40upx;
				font-size: 32upx;
				line-height: 92upx;
			}
			.close{
				display: block;
				text-align: center;
				padding: 30upx 0;
			}
		}
	}
</style>